import 'package:pacsun/theme/app_colors.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/flutter_svg.dart';

class YouNeed extends StatelessWidget {
  const YouNeed({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: 310.h,
      color: Color(0XFF06041b),
      padding: EdgeInsets.only(top: 28, right: 50, left: 50, bottom: 17).r,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(
            "Here's What You Need",
            style: customTextStyle(fontSize: 24, fontWeight: 600),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              YouNeedItme(
                icon: '1K+',
                firstText: '1k Followers ',
                lastText: 'Anywhere',
                iconType: 'text',
              ),
              YouNeedItme(
                icon: 'assets/icons/icon_culture.svg',
                firstText: 'Energy for',
                lastText: 'the Culture',
              ),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              YouNeedItme(
                icon: 'assets/icons/icon_only.svg',
                firstText: 'Community ',
                lastText: 'Vibes Only',
              ),
              YouNeedItme(
                icon: 'assets/icons/icon_Authenticity.svg',
                firstText: 'Authenticity',
                lastText: 'Over Perfection',
              )
            ],
          ),
        ],
      ),
    );
  }
}

class YouNeedItme extends StatelessWidget {
  final String icon;
  final String firstText;
  final String lastText;
  final String iconType;
  const YouNeedItme({
    super.key,
    required this.icon,
    required this.firstText,
    required this.lastText,
    this.iconType = 'icon',
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 105.w,
      margin: EdgeInsets.only(top: 23).r,
      child: Column(
        children: [
          Container(
            width: 48.w,
            height: 45.h,
            margin: EdgeInsets.only(bottom: 4).r,
            alignment: Alignment.center,
            child: iconType == 'text'
                ? Text(
                    icon,
                    style: customTextStyle(
                      fontSize: 28,
                      fontWeight: 900,
                      color: FamilyTextColor.yellow,
                    ),
                    softWrap: false,
                  )
                : SvgPicture.asset(
                    icon,
                    width: 30.w,
                    height: 30.h,
                  ),
          ),
          Text(
            firstText,
            style: customTextStyle(fontSize: 14, height: 22 / 14),
            textAlign: TextAlign.center,
          ),
          Text(
            lastText,
            style: customTextStyle(fontSize: 14, height: 22 / 14),
            textAlign: TextAlign.center,
            softWrap: false,
          )
        ],
      ),
    );
  }
}
